<a style="display: none" id="errorAction" href="#erreur" class="nyromodal"></a>

<div id="erreur" style="display:none;">
    
    <header class="header_form" style="margin-top: 60px;">
        <h1 class="align-center">Bienvenue !</h1>
    </header>
    <br />

    <p class="align-center"><small>
        Pour une meilleure expérience utilisateur,<br />
        nous pouvons afficher les informations<br />
        les plus proches de chez vous !
    </small></p>

    <form class="ajax_form" style="height:140px;" action="./" method="post">
        <input type="hidden" name="todo" value="user[PopinAccueil]" />
        <div id="localisation">
            <div id="loc1">
                <label for="region">Région</label>
                <select name="region" id="region">
                    { foreach from=$regions item=region name=it }
                        <option value="{$region.0}">{ $region.1 }</option>
                    {/foreach}
                </select>
            </div>
            <div id="loc2" style="display:none;">
                <label for="departement">Département</label>
                <select name="departement" id="departement">
                </select>
            </div>
            <div id="loc3" style="display:none;">
                <label for="ville">Ville</label>
                <select name="ville" id="ville">
                </select>
            </div>
        </div>
        <p id="bouton">
        	<button type="submit">C'est parti !</button>
        </p>
    </form>

    {literal}
    <script>
        jQuery('form #region').change(function (){
            var regionID = jQuery(this).val();
            jQuery.getJSON('{/literal}{$SYS_FOLDER}{literal}services/formulaires/departement/'+regionID, function(data) {
                jQuery('#loc2').fadeIn();
                var options = '';
                var i = 0;
                jQuery.each(data, function(key, val) {
                    if(i == 0){ loadVille(val[0]); } i++;
                    options += "<option value='"+val[0]+"'>"+val[3]+"</option>";
                });
                jQuery('#departement').html(options);
            });
        });

        jQuery('form #departement').change(function (){ loadVille(jQuery(this).val()); })

        function loadVille(DepId){
            jQuery.getJSON('{/literal}{$SYS_FOLDER}{literal}services/formulaires/ville/'+DepId, function(data) {
                jQuery('#loc3, #loc4').fadeIn();
                var options = '';
                jQuery.each(data, function(key, val) {
                    options += "<option value='"+val[0]+"'>"+val[2]+"</option>";
                });
                jQuery('#ville').html(options);
            });
        }

        jQuery('form #region').change();
    </script>
    {/literal}
</div>